<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="/icofont/iconfont.css">
    <link rel="stylesheet" href="/css/detail.css">
    <script src="/lib/require/require.min.js" data-main="/js/detail.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header></header>

    <!-- 头部下面的副导航 -->
    <div class="subnav">
        <div class="container">
            <a href="/">首页</a>
            &gt;
            <span>新品上市</span>
            &gt;
            <span>xx香水</span>
        </div>
    </div>

    <!-- 放大镜部分 -->
    <div class="content container">
        <div id="box">
    
        </div>
        <script type="text/html" id="detailData">
            <div class="left">
                <div class="show">
                    <img src="{{photo[0].url}}" class="zoom-image">
                    <!-- <div class="mask"></div> -->
                </div>
                <ul id="smImage">
                    {{each photo item}}
                    <li>
                        <a href="javascript:;" data-image="{{item.url}}" data-zoom-image="{{item.url}}">
                            <img src="{{item.url}}" alt="">
                        </a>
                    </li>
                    {{/each}}
                </ul>
                <!-- <div class="bigBox">
                    <img src="/images/index/1.png" alt="">
                </div> -->
            </div>
            <div class="right">
                <h3><strong>{{title}}</strong></h3>
                <p class="small">折扣下杀</p>
                <section>
                    {{price}}<em><del>{{originPrice}}</del></em>
                </section>
                <p class="small">商品编号：<em>{{itemId}}</em></p>
                <hr>
                <p class="small">供货状况：尚有库存<em>{{favoritedCount}}</em>件</p>
                <ul>
                    <li class="opt">
                        <select>
                            <option selected> - {{price}} (市價: {{originPrice}})</option>
                        </select>
                    </li>
                    <li class="count">
                        <input type="button" value="-" class="btn reduce"><input type="text" value="1" id="num_"><input type="button" value="+" class="btn add">
                    </li>
                    <li class="addToCar">
                        <a href="#">加入购物车</a>
                    </li>
                    <li class="purchase">
                        <a href="#">立即购买</a>
                    </li>
                </ul>

            </div>
        </script>
        <!-- 提醒加入购物车成功 -->
        <div class="warning">加入成功</div>
    </div>

    <!-- 商品详情 -->
    <div class="detail container">
        <ul>
            <li class="active">
                <a href="#prod">商品介绍</a>
            </li>
            <li>
                <a href="#purchase">购买流程</a>
            </li>
            <li>
                <a href="#payForProd">付款与配送需知</a>
            </li>
        </ul>

        <p class="title" id="prod"><strong>商品介绍</strong></p>
        
        <div id="detailImg">
            <!-- <img src="/images/detail/detail1.jpg" alt="">
            <p>品名：輕柔麝香</p>
            <p>規格：30ml 古龍水</p>
            <p>成份：香精、玉米酒精、蒸餾水（香水95％使用天然成份）</p>
            <p>嗅味：</p>
            <img src="/images/detail/detail2.jpg" alt="">
            <img src="/images/detail/detail3.jpg" alt="">
            <img src="/images/detail/detail4.jpg" alt=""> -->
        </div>
        <script type="text/html" id="detailImgXR">
            {{each descContentList des}}
            <img src="{{des.image.url}}" alt="">
            {{/each}}
        </script>
        
        <p class="title" id="purchase"><strong>购买流程</strong></p>
        <p class="title" id="payForProd"><strong>付款与配送需知</strong></p>


        <!-- 相关商品 标题-->
        <p class="title"><strong>相关商品</strong></p>

        <!-- 相关商品 滑动图 -->
        <div class="picScroll-left">
            <div class="hhd">
                <a class="next"></a>
                <a class="prev"></a>
            </div>
            <div class="bd">
                <ul class="picList">
                    <section>
                        <div class="pic">
                            <a href="#" target="_blank">
                                <img src="/images/index/1.png" />
                            </a>
                            <h2>氣味圖書館 Demeter</h2>
                            <h3>【琴湯尼】 Gin Tonic 香水30ml</h3>
                            <p>
                                NT$800 <del>NT$1100</del>
                            </p>
                            <a href="#">
                                已售完
                            </a>
                        </div>
                    </section>
                    <section>
                        <div class="pic">
                            <a href="#" target="_blank">
                                <img src="/images/index/2.png" />
                            </a>
                            <h2>氣味圖書館 Demeter</h2>
                            <h3>【琴湯尼】 Gin Tonic 香水30ml</h3>
                            <p>
                                NT$800 <del>NT$1100</del>
                            </p>
                            <a href="#">
                                已售完
                            </a>
                        </div>
                    </section>
                    <section>
                        <div class="pic">
                            <a href="#" target="_blank">
                                <img src="/images/index/3.png" />
                            </a>
                            <h2>氣味圖書館 Demeter</h2>
                            <h3>【琴湯尼】 Gin Tonic 香水30ml</h3>
                            <p>
                                NT$800 <del>NT$1100</del>
                            </p>
                            <a href="#">
                                已售完
                            </a>
                        </div>
                    </section>
                    <section>
                        <div class="pic">
                            <a href="#" target="_blank">
                                <img src="/images/index/4.png" />
                            </a>
                            <h2>氣味圖書館 Demeter</h2>
                            <h3>【琴湯尼】 Gin Tonic 香水30ml</h3>
                            <p>
                                NT$800 <del>NT$1100</del>
                            </p>
                            <a href="#">
                                已售完
                            </a>
                        </div>
                    </section>
                    <section>
                        <div class="pic">
                            <a href="#" target="_blank">
                                <img src="/images/index/5.png" />
                            </a>
                            <h2>氣味圖書館 Demeter</h2>
                            <h3>【琴湯尼】 Gin Tonic 香水30ml</h3>
                            <p>
                                NT$800 <del>NT$1100</del>
                            </p>
                            <a href="#">
                                已售完
                            </a>
                        </div>
                    </section>
                </ul>
            </div>
        </div>
    </div>


    <!-- 尾部 -->
    <footer></footer>
</body>

</html>